<template>
  <div id="main-body">
    <p class="nav">
      <span>卡号:{{cardno}}</span>
      <a href="javascript:;" @click="logout()">退出登录</a>
    </p>
    <div>
<!--      操作区-->
      <div id="options">
        <ul>
          <li @click="msgStatus = false"><router-link :to="{name:'Balance',params:{cardno}}">查询余额</router-link></li>
          <li @click="msgStatus = false"><router-link :to="{name:'TransferAccounts',params:{cardno}}">转账</router-link></li>
          <li @click="msgStatus = false"><router-link :to="{name:'TransactionRecord',params:{cardno}}">查询交易记录</router-link></li>
          <li @click="msgStatus = false"><router-link :to="{name:'UpdatePassword',params:{cardno}}">修改密码</router-link></li>
        </ul>
      </div>
<!--      信息展示区-->
      <div id="show-msg">
        <p id="msg" v-if="msgStatus">{{ msg }}</p>
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Index",
  data(){
    return {
      cardno:'',//卡号
      msgStatus: true,
      msg:'欢迎使用个人网上银行'
    }
  },
  methods:{
    logout(){
      const flag = confirm("确定要退出网上银行吗？")
      if (flag){
        this.$router.push({name:'Login'});
      }
    }
  },
  created() {
    this.cardno = this.$route.params.cardno;
    if (typeof this.cardno === 'undefined'){//未登录重定向
      this.$router.push({name:'Login'});
    }
  }
}
</script>

<style scoped>
#msg{
  margin-top: 100px;
  font-size: 30px;
  font-weight: 700;
}
.nav{
  /*文本左对齐*/
  text-align: left;
  /*首行缩进*/
  text-indent:2em;
  /*黑体*/
  font-family:SimHei;
  /*加粗*/
  font-weight:500;
  font-size: 18px;
}
#main-body{
  width: 1000px;
  height: 700px;
  margin: auto;
  margin-top: 100px;
}
#main-body li{
  /*li去掉圆点*/
  list-style: none;
  /*li上下间距*/
  padding-top: 5px;
}
#show-msg{
  float: left;
  border: blue solid 3px;
  width: 600px;
  height: 300px;
}
#options{
  float: left;
  text-align: left;
}
</style>
